<!--
 * @Author: ZJP 2712104231@qq.com
 * @Date: 2025-03-03 10:29:46
 * @LastEditors: ZJP 2712104231@qq.com
 * @LastEditTime: 2025-03-21 10:08:42
 * @FilePath: \zhlx-autoform-ui\src\components\form-designer\setting-panel\property-editor\linkageWidget-editor.vue
 * @Description: 关联组件
 * 
 * Copyright (c) 2025 by zhlx - 2712104231@qq.com, All Rights Reserved. 
-->
<template>
  <el-form-item>
    <template #label>
      <div class="custom-label">
        <el-checkbox v-model="optionModel.openLinkageWidget" @change="onchange"></el-checkbox>
        <span class="custom-label-text">数据关联</span>
      </div>
    </template>
  </el-form-item>
  <template v-if="optionModel.openLinkageWidget">
    <el-form-item label="关联对象">
      <el-select 
        v-model="optionModel.linkageWidget" 
        placeholder="请选择" 
        clearable
      >
        <el-option v-for="item in formDomainSelectDepartmentList" :key="item.name" :value="item.id" :label="`${item.label}[${item.name}]`"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="关联属性">
      <el-select 
        v-model="optionModel.linkageAttribute" 
        placeholder="请选择" 
        clearable
      >
        <el-option v-for="item in linkageAttributeList" :key="item.id" :value="item.id" :label="item.label"></el-option>
      </el-select>
    </el-form-item>
  </template>
</template>

<script>
  import SvgIcon from '@/components/svg-icon/index.vue'
  import i18n from "@/utils/i18n"
  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
  import { isBoolean } from 'lodash'

  export default {
    name: "linkageWidget-editor",
    mixins: [i18n, propertyMixin],
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    components: {
      SvgIcon,
    },
    data() {
      return {
        linkageAttributeList: [
          { id: 'department', label: '部门' },
        ]
      }
    },
    computed: {
      // 计算数据域中主表人员组件列表 + [当前子表单人员组件列表]
      formDomainSelectDepartmentList() {
        const list = []
        this.designer.formDomainData.forEach((item) => {
          if (item.type == "select-person") {
            list.push({
              id: item.id,
              name: item.options.keyName || item.options.name,
              label: item.options.label,
            })
          } else if(item.type == "sub-form" && item.widgetList.find(subItem => subItem.options.name === this.selectedWidget.options.name)) {
            item.widgetList.forEach(subItem => {
              if (subItem.type == "select-person") {
                list.push({
                  id: subItem.options.name,
                  name: subItem.options.keyName || subItem.options.name,
                  label: subItem.options.label,
                  type: 'sub-form'
                })
              }
            })
          }
        })
        return list
      },
    },
    watch: {
      'optionModel.openLinkageWidget': {
        handler(val) {
          // 修复旧数据没有openLinkageWidget属性切换控件后导致checkbox显示异常
          if (!isBoolean(val)) {
            this.optionModel.openLinkageWidget = false
            this.optionModel.linkageWidget = ''
            this.optionModel.linkageAttribute = ''
          }
        },
        immediate: true
      }
    },
    methods: {
      /**
       * 是否开启关联组件
       * @param val 
       */
       onchange(val) {
        if (!val) {
          this.optionModel.linkageWidget = ''
          this.optionModel.linkageAttribute = ''
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
:deep(.el-radio-button__inner) {
  padding: 5px 7px !important;
}
.custom-label {
  display: flex;
  align-content: center;
  line-height: 24px;
  :deep(.el-checkbox) {
    margin-right: 4px;
  }
}
</style>

